<template>
  <el-row class="light-map-content">
    <el-col :span="24" v-bind:style="map.mapStyle" >
      <el-row class="map-row">
        <el-col :span="24" class="map-col" v-bind:style="map.mapStyle" ><div id="container" class="grid-content "></div></el-col>
      </el-row>
      <el-row class="content-row">
        <el-col :span="24" class="" >
          <div class="grid-content address" v-bind:class="{'address-plus': address.isDetail}">
            <el-cascader
              :options="address.options"
              :clearable="address.clearable"
              :props="address.props"
              placeholder="请选择地址"
              expand-trigger="hover"
              v-model="address.selected"
              popper-class="address-select"
              @change="addressHandleChange">
            </el-cascader>
            <el-button type="primary" icon="el-icon-search" @click="getLight"></el-button>
            <el-button v-if="address.isDetail" type="primary" @click="enableMouseTool" v-bind:class="{'active': map.mouseEnable}" class="btn-batch-ctrl" >批量</el-button>
            <el-input v-if="address.isDetail" v-model="address.sn" @change="snChangeHandler" placeholder="请输入SN定位" clearable class="sn-input"></el-input>
          </div>
          <div class="grid-content button">
            <el-row v-bind:key="item.key" v-for="item in button.buttons">
              <el-col :span="24"><div @click="buttonsClickHandler(item)" class="grid-content button-item" v-bind:class="{active: item.active}">{{item.title}}</div></el-col>
            </el-row>
          </div>

          <div v-if="map.exampleAlready" class="grid-content example-container ">
            <el-row v-bind:key="item.key" v-for="item in map.example">
              <el-col :span="24"><div class="grid-content example-item" v-bind:style="item.style">{{'路灯'+item.status}}</div></el-col>
            </el-row>
          </div>

          <el-drawer
            :title="information.sn"
            :before-close="handleClose"
            :visible.sync="information.dialog"
            :modal="information.dialogModal"
            :wrapperClosable="information.dialogModal === false"
            :modal-append-to-body="information.dialogModal"
            direction="rtl"
            custom-class="light-information-drawer"
            ref="drawer"
            size="25%"
          >
            <div class="demo-drawer__content light-info-drawer">
              <el-row class="light-info-base">
                <el-col :span="24">
                  <div class="grid-content">
                    <div class="light-info-base-detail">厂家名称:&nbsp;{{information.company}}</div>
                    <div class="light-info-base-detail">IMEI:&nbsp;{{information.imei}}</div>
                    <div class="light-info-base-detail">安装地址:&nbsp;{{information.address}}</div>
                    <div class="light-info-base-detail">更新时间:&nbsp;{{information.installTime}}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="light-info-body-row">
                <el-col :span="24" class="light-info-body-col">
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content light-progress">
                        <el-row v-bind:key="rowItem.key" v-for="rowItem in information.progress" :gutter="8">
                          <el-col v-bind:key="item.title" v-for="item in rowItem" :span="12" class="item-col">
                            <div class="grid-content light-info-progress-item">
                              <el-progress :type="item.type" :percentage="parseInt(item.percentage)"
                                           :color="item.colors" :width="information.progressWidth"
                                           :stroke-width="parseInt(item.strokeWidth)"
                                           :text-inside="item.textInside"></el-progress>
                              <div class="light-info-progress-item-title" v-bind:class="{'light-info-progress-dashboard-item-title': item.type === 'dashboard'}">{{item.title}}</div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <div class="grid-content light-info-button">
                        <el-button-group>
                          <el-button v-for="item in information.buttons" v-if="item.turnonOrTurnoff"
                                     @click="btnInDrawerClickHandler(item)"
                                     v-bind:class="{'active': item.active, 'el-icon-open' : information.isOn === 'off', 'el-icon-turn-off' : information.isOn === 'on', 'el-icon-turn-off' : information.isOn !== ''}"
                                     v-bind:key="item.key" type="primary" :icon="item.icon"></el-button>
                          <el-button v-else @click="btnInDrawerClickHandler(item)" v-bind:class="{active: item.active}" v-bind:key="item.key" type="primary" :icon="item.icon"></el-button>
                        </el-button-group>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <!--dialog start-->
              <el-dialog title="选择策略"
                         :visible.sync="information.strategy.show"
                         :append-to-body="information.strategy.toBody"
                         :close-on-click-modal="information.strategy.modalClose"
                         custom-class="strategy-dialog">
                <el-form :model="information.strategy.form">
                  <el-form-item label="策略" :label-width="information.strategy.formLabelWidth">
                    <el-select v-model="information.strategy.form.strategy" placeholder="请选择策略" clearable>
                      <el-select v-model="information.strategy.form.strategy" placeholder="请选择策略" clearable>
                        <el-option
                          v-for="item in information.batch.strategy.options"
                          :key="item[information.strategyValue]"
                          :label="item[information.strategyLabel]"
                          :value="item[information.strategyValue]">
                        </el-option>
                      </el-select>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="information.strategy.show = false">取 消</el-button>
                  <el-button type="primary" @click="strategyConfirm">确 定</el-button>
                </div>
              </el-dialog>
              <el-dialog title="选择功率"
                         :visible.sync="information.power.show"
                         :append-to-body="information.power.toBody"
                         :close-on-click-modal="information.power.modalClose"
                         custom-class="power-dialog">
                <el-form :model="information.power.form">
                  <el-form-item label="功率" :label-width="information.power.formLabelWidth">
                    <el-slider
                      v-model="information.power.form.value"
                      max=30
                      show-input>
                    </el-slider>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="information.power.show = false">取 消</el-button>
                  <el-button type="primary" @click="powerConfirm">确 定</el-button>
                </div>
              </el-dialog>
              <!--dialog end-->
            </div>
          </el-drawer>
          <!--out dialog start-->
          <el-dialog title="批量操作"
                     :visible.sync="information.batch.show"
                     :append-to-body="information.batch.toBody"
                     :close-on-click-modal="true === false"
                     custom-class="batch-dialog">
            <el-row>
              <el-col :span="24">
                <div class="tip">
                  <p>
                    当前选择路灯&nbsp;<span>{{information.batch.number}}</span>&nbsp;个。
                  </p>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="text-align: center;">
                <el-button-group>
                  <el-button v-for="item in information.batch.buttons" @click="batchBtnClickHandler(item)"
                             v-bind:key="item.key" type="primary" :icon="item.icon">{{item.title}}</el-button>
                </el-button-group>
              </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
              <el-button @click="batchClose">取 消</el-button>
            </div>

            <!--in dialog start-->
            <el-dialog title="选择策略"
                       :visible.sync="information.batch.strategy.show"
                       :append-to-body="information.batch.strategy.toBody"
                       :close-on-click-modal="information.batch.strategy.modalClose"
                       custom-class="strategy-dialog">
              <el-form :model="information.batch.strategy.form">
                <el-form-item label="策略" :label-width="information.batch.strategy.formLabelWidth">
                  <el-select v-model="information.batch.strategy.form.strategy" placeholder="请选择策略" clearable>
                    <el-option
                      v-for="item in information.batch.strategy.options"
                      :key="item[information.strategyValue]"
                      :label="item[information.strategyLabel]"
                      :value="item[information.strategyValue]">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="information.batch.strategy.show = false">取 消</el-button>
                <el-button type="primary" @click="strategyConfirm(true)">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="选择功率"
                       :visible.sync="information.batch.power.show"
                       :append-to-body="information.batch.power.toBody"
                       :close-on-click-modal="information.batch.power.modalClose"
                       custom-class="power-dialog">
              <el-form :model="information.batch.power.form">
                <el-form-item label="功率" :label-width="information.batch.power.formLabelWidth">
                  <el-slider
                    v-model="information.batch.power.form.value"
                    max=30
                    show-input>
                  </el-slider>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="information.batch.power.show = false">取 消</el-button>
                <el-button type="primary" @click="powerConfirm(true)">确 定</el-button>
              </div>
            </el-dialog>
            <!-- in dialog end-->

          </el-dialog>
          <!--out dialog end-->
        </el-col>
      </el-row>
    </el-col>
  </el-row>

</template>

<script>
  import {getDeviceCount, getDeviceList, getAreaTree, iotAction, getStrategy} from "../../api/amap/map";
  import AMap from 'AMap';
  import AMapUI from 'AMapUI';

  export default {
    data() {
      return {
        map: {
          map: null,
          mapStyle: {height: ''},
          offset: {bottom: 60},
          province: [],
          clickedMarker: null,
          selectedMarkers: [],
          markers: [],
          provinces: [],
          example: [],
          exampleAlready: false,
          minZoom: 5,
          maxZoom: 18,
          center: [100.948024,36.263161], // 100.948024,36.263161  116.3683244,39.915085
          light: {
            alarm: 'http://www.sksoon.com/linyang/alarm.png',
            on: 'http://www.sksoon.com/linyang/on.png',
            off: 'http://www.sksoon.com/linyang/off.png',
            offline: 'http://www.sksoon.com/linyang/lixian.png',
          },
          mouseEnable: false,
          mouseTool: null,
          overlays: [],
        },
        address: {
          options: [],
          selected: [],
          clearable: true,
          isDetail: false,
          props: {
            label: 'title',
          },
          sn: '',

        },
        button: {
          buttons:[
            {active: false, title: '太阳能路灯', key: 'btn1', },
            {active: false, title: '市电路灯', key: 'btn2', },
            {active: false, title: '  5G路灯', key: 'btn3', },
          ],
        },
        information: {
          dialog: false,
          dialogModal: true,
          progressWidth: 0,
          strategyValue: 'value',
          strategyLabel: 'label',
          isOn: 'off',
          buttons: [
            {active: false, strategy: true, icon: 'el-icon-message', key: 'btn1', },
            {active: false, restart: true, icon: 'el-icon-refresh', key: 'btn2', },
            {active: false, turnonOrTurnoff: true, iconOn: 'el-icon-open', iconOff: 'el-icon-turn-off', key: 'btn3', },
            {active: false, admin: true, icon: 'el-icon-s-unfold', key: 'btn5', },
          ],
          data: [{type: 'dashboard', title: '光电池电压'},
            {type: 'dashboard', title: '蓄电池电压'},
            {type: 'dashboard', title: 'NB通信信号强度'},
            {type: 'dashboard', title: '负载电流'},
            {type: 'line', title: '日累计发电量'},
            {type: 'line', title: '负载功率'},
            {type: 'line', title: '控制器内部温度'},
            {type: 'line', title: '电池包温度'},
          ],
          sn: 'SN.011172024C',
          progress: [],
          strategy: {
            show: false,
            formLabelWidth: '120px',
            form: {strategy: 0},
            options: [],
            toBody: true,
            modalClose: false,
          },
          power: {
            show: false,
            formLabelWidth: '120px',
            form: {value: 0},
            toBody: true,
            modalClose: false,
          },
          batch: {
            show: false,
            toBody: true,
            number: 0,
            value: 0,
            buttons: [
              {title: '下发策略', strategy: true, icon: 'el-icon-message', key: 'btn1', },
              {title: '重启路灯', restart: true, icon: 'el-icon-refresh', key: 'btn2', },
              {title: '开启路灯', turnon: true, icon: 'el-icon-open', key: 'btn3', },
              {title: '关闭路灯', turnoff: true, icon: 'el-icon-turn-off', key: 'btn4', },
              {title: '添加分组', group: true, icon: 'el-icon-folder-add', key: 'btn5', },
            ],
            strategy: {
              show: false,
              formLabelWidth: '120px',
              form: {strategy: 0},
              options: [],
              toBody: true,
              modalClose: false,
            },
            power: {
              show: false,
              formLabelWidth: '120px',
              form: {value: 0},
              toBody: true,
              modalClose: false,
            },
          },
          param: {},
        }
      }
    },
    methods: {
      init: function() {
        this.information.progressWidth = (window.innerHeight - 442)/4;  // 12

        // 初始化地图
        var self = this;

        var avueView = document.getElementById('avue-view');
        if (this.map.offset.bottom) {
          this.map.mapStyle.height = (avueView.clientHeight - this.map.offset.bottom) + 'px';
        } else {
          this.map.mapStyle.height = avueView.clientHeight + 'px';
        }

        self.map.map = new AMap.Map('container', {
          resizeEnable: true, //是否监控地图容器尺寸变化
          zoom: self.map.minZoom,//初始化地图层级
          showLabel: true, //不显示地图文字标记
          center: self.map.center,//初始化地图中心点
          zoomEnable: false,
          mapStyle: 'amap://styles/4a07c0092051179d3998440e999ec430',
          zooms: [self.map.minZoom, self.map.maxZoom], //限制缩放的等级

        });

        self.map.map.on('complete', function(){
          // 地图图块加载完成后触发
          self.initExample();
          self.initMouseTool();
          self.getCity();

        });
      },
      initExample: function() {
        var titles = {
          alarm: '故障',
            on: '启动',
            off: '关闭',
            offline: '离线',
        };

        for (var key in this.map.light) {
          this.map.example.push({
            status: titles[key],
            style: {backgroundImage: 'url("'+this.map.light[key]+'")'},
            key: key,
          })
        }
      },
      initMouseTool: function () {
        var self = this;

        this.map.mouseTool = new AMap.MouseTool(this.map.map);
        this.map.mouseTool.on('draw',function(e){
          self.map.map.remove(self.map.overlays);
          self.map.overlays = [];
          self.map.overlays.push(e.obj);

          var bounds = e.obj.getBounds();
          self.map.selectedMarkers = [];
          var allMarkers = self.map.markers;
          var overlayPath = [];	//覆盖物路径

          if(e.obj.CLASS_NAME=="AMap.Marker" || e.obj.CLASS_NAME=="AMap.ElasticMarker"){
            overlayPath.push(e.obj.getPosition());
          }else{
            var southWest = bounds.getSouthWest();
            var northEast = bounds.getNorthEast();
            if(southWest.equals(northEast)){
              return;
            }
            overlayPath = e.obj.getPath();
          }

          allMarkers.forEach(function (item) {
            var point = item.getPosition();

            var isPointInRing =  AMap.GeometryUtil.isPointInRing(point,overlayPath);//bounds.contains(point);

            if (isPointInRing === true) {
              self.map.selectedMarkers.push(item);
              item.setAnimation('AMAP_ANIMATION_BOUNCE');
            } else {
              item.setAnimation('AMAP_ANIMATION_NONE');
            }
          });

          //在此处处理框选结束的逻辑
          self.batchHandler()
        });
      },
      enableMouseTool: function() {
        this.map.mouseEnable = !this.map.mouseEnable;
        if (this.map.mouseEnable) {
          this.$message('已启用批量处理！');
          this.map.map.setStatus({dragEnable: false});
          this.map.mouseTool.rectangle({
            fillColor:'#00b0ff',
            strokeColor:'#80d8ff'
            //同Polygon的Option设置
          });
        } else {
          this.$message('已关闭批量处理！');
          this.map.map.setStatus({dragEnable: true});
          this.map.mouseTool.close(true);
          if (this.map.markers.length > 0) {
            this.map.markers.forEach(function (item) {
              item.setAnimation('AMAP_ANIMATION_NONE');
            });
          }

        }
      },
      batchHandler: function() {
        if (this.map.selectedMarkers.length > 0) {
          this.information.batch.number = this.map.selectedMarkers.length;
          this.information.batch.show = true;
        } else {
          this.$message('未框选到设备！');
        }
      },
      batchClose: function() {
        this.information.batch.show = false
        if (this.map.selectedMarkers.length > 0) {
          this.map.selectedMarkers.forEach(function (item) {
            item.setAnimation('AMAP_ANIMATION_NONE');
          });
        }
      },
      batchBtnClickHandler: function (current) {
        var self = this;

        if (this.map.selectedMarkers.length < 1) {
          return;
        }

        var temp = [];

        this.map.selectedMarkers.forEach(function (item) {
          var light = item.getExtData();
          temp.push(light.sn);
        });

        this.information.param = {
          sns: temp.join(','), //（设备编码pid），
        };

        if (current.strategy) {
          getStrategy().then(res => {
            if (res.status === 200 && res.statusText === 'OK') {
              if (res.data && res.data.success === true && res.data.data.records.length > 0) {
                self.information.batch.strategy.options = res.data.data.records;
              } else {
                this.$message('未获取到策略，中止操作！！');
              }
            } else {
              this.$message('获取策略异常，中止操作！！');
            }
          });
        } else if (current.restart) {
          this.iotAction('rebootControllerBatch', 'post', '开灯');
        } else if (current.turnon) {
          this.information.param.openStatus = 1;
          this.information.param.openPower = 15;
          this.information.batch.power.show = true;
        } else if (current.turnoff) {
          this.information.param.openStatus = 0;
          this.information.param.openPower = 15;
          this.iotAction('openLampBatch', 'post', '关闭');
        } else if (current.group) {
          this.$message('持续开发中...敬请谅解！');
        }
      },
      getCity: function () {
        // 加载地区
        var self = this;
        getAreaTree().then(res => {
          if (res.status === 200 && res.statusText === 'OK') {
            if (res.data && res.data.success === true) {
              self.address.options = res.data.data;
              self.map.province = res.data.data;
              self.getProvinceCount();
            } else {
              self.$message(res.data.msg);
            }
          } else {
            self.address.options = [];
          }
        });
      },
      addressHandleChange: function (value) {
        // 地址选择回调 暂时处理逻辑：清除地址时清除当前的marker，展示省份的统计。
        if (value.length < 1) {
          this.removeMarker();
          this.showProvince(true);
        }

      },
      getLight: function(){
        var self = this;
        // 点击搜索回调
        if (this.address.selected.length < 1) {
          this.$message('请选择地址！');
          return;
        }

        this.removeMarker(); // 清除之前展示的路灯
        this.map.map.setStatus({
          zoomEnable :  true,
        });

        getDeviceList(1, 100, {id: this.address.selected instanceof Array ?  this.address.selected[this.address.selected.length - 1] : this.address.selected}).then(res => {
          if (res.status === 200 && res.statusText === 'OK') {
            if (res.data && res.data.success === true) {
              self.renderLight(res.data.data.records);
            } else {
              self.$message(res.data.msg);
            }
          } else {
            self.address.options = [];
          }
        });
      },
      renderLight: function(data) {
        var self = this;
        if (data && data instanceof Array && data.length > 0) {
          self.address.isDetail = true;
          self.map.exampleAlready = true;

          var lights = [];
          data.forEach(function (item) {
            if (item.longitude && item.latitude) {
              lights.push(self.initLight(item));
            }

          });

          self.showProvince(false);
          self.map.markers = lights;
          self.map.map.add(lights);
          self.map.map.setFitView();

        } else {
          self.address.isDetail = false;
          self.map.exampleAlready = false;
          this.$message('当前地址无路灯!');
        }

      },
      removeMarker: function() {
        if (this.map.markers.length > 0) {
          this.map.map.remove(this.map.markers)
        }
        this.address.isDetail = false;
        this.map.exampleAlready = false;
      },
      initLight: function(light, type){
        var self = this;

        var icon = this.map.light.offline;
        if (light.currentControllerStatus==5) {//故障
          icon = this.map.light.alarm;
        } else if (light.currentControllerStatus==3 || (light.loadElectrics>0.02  && (light.currentControllerStatus!=5 && light.currentControllerStatus!=10))) {//开
          icon = this.map.light.on;
        } else if ((light.currentControllerStatus!=10 && light.currentControllerStatus!=5 && light.loadElectrics<0.02)|| (light.loadElectrics<0.02 && (light.currentControllerStatus==1 || light.currentControllerStatus==2 || light.currentControllerStatus==4))) {//关
          icon = this.map.light.off;
        } else if (light.currentControllerStatus==10 || light.currentControllerStatus=== null) {//offline
          icon = this.map.light.offline;
        }

        if (type === 'normal') {
          var _icon = new AMap.Icon({
            size: new AMap.Size(20, 30),
            // 图标的取图地址
            image: icon,
            imageSize: new AMap.Size(20, 30),
            // 图标取图偏移量
            imageOffset: new AMap.Pixel(0, 0)
          });

          // 将 icon 传入 marker
          var marker = new AMap.Marker({//parseFloat(data.longitude) + Math.random(), parseFloat(data.latitude) + Math.random()
            position: new AMap.LngLat(light.longitude, light.latitude),
            // content:  '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            icon: _icon,
            zIndex: 2000,
            extData: light,
          });

          marker.on('click', function(e){
            if (self.map.clickedMarker) {
              self.map.clickedMarker.setAnimation('AMAP_ANIMATION_NONE');
            }
            e.target.setAnimation('AMAP_ANIMATION_BOUNCE');
            self.initLightStatus(light);
            self.information.sn = 'SN.'+light.sn;
            self.information.company = '';
            self.information.imei = light.imei;
            self.information.address = '';
            self.information.installTime = light.createTime;
            self.map.clickedMarker = e.target;
            self.information.progressWidth = (window.innerHeight - 442)/4;  // 12

            self.information.dialog = true;

          });

          return marker;
        }

        var em = new AMap.ElasticMarker({
          styles: [
            {
              icon:{
                img: icon, // orange: ee5f07, red-slow:d4237a ,yellow-slow:f9f28b , blue:1296db ,yellow:f4ea2a red:d81e06
                size:[20, 30],//图标的原始大小
                ancher:[20, 30],//锚点，图标原始大小下锚点所处的位置，相对左上角
                imageOffset:[0,0],
                //可缺省，当使用精灵图时可用，标示图标在整个图片中左上角的位置
                imageSize:[20, 30],
                //可缺省，当使用精灵图时可用，整张图片的大小
                fitZoom:5,//最合适的级别，在此级别下显示为原始大小
                scaleFactor:2,//地图放大一级的缩放比例系数
                maxScale:2,//最大放大比例
                minScale:1//最小放大比例
              },
              label:{
                content:'<div class="map-province-label" style="background-color: #1296db">'+light.sn+'</div>',//文本内容
                position:'MR',//文本位置相对于图标的基准点，
                //BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、
                //左侧中央、右侧中央、左上角、顶部中央、右上角。
                //缺省时代表相对图标的锚点位置
                offset:[-5,-15],//相对position的偏移量
                minZoom:4//label的最小显示级别
              }
            }
          ], // 样式组
          zoomStyleMapping:{
            4:0,5:0,6:0,7:0,8:0,9:0,10:0,11:0,12:0,13:0,
            14:0,
            15:0,
            16:0,
            17:0,
            18:0,
            19:0,
            20:0
          }, // 缩放与样式组对应
          map: self.map.map,
          position: new AMap.LngLat(light.longitude, light.latitude),
          extData: light,

        });

        em.on('click', function (e) {
          if (self.map.clickedMarker) {
            self.map.clickedMarker.setAnimation('AMAP_ANIMATION_NONE');
          }
          e.target.setAnimation('AMAP_ANIMATION_BOUNCE');
          self.information.sn = 'SN.'+light.sn;
          self.information.company = '';
          self.information.imei = light.imei;
          self.information.address = '';
          self.information.installTime = light.createTime;
          self.map.clickedMarker = e.target;
          self.information.progressWidth = (window.innerHeight - 442)/4;  // 12
          self.information.dialog = true;
        });

        return em;
      },
      getProvinceCount: function(){
        var self = this;
        self.address.isDetail = false;
        self.map.exampleAlready = false;
        this.map.map.setZoomAndCenter(this.map.minZoom, this.map.center);
        this.map.map.setStatus({
          zoomEnable :  false,
        });
        getDeviceCount().then(res => {
          if (res.status === 200 && res.statusText === 'OK') {
            if (res.data && res.data.success === true) {
              self.renderProvince(res.data.data);
            } else {
              self.$message(res.data.msg);
            }
          } else {
            self.address.options = [];
          }
        });
      },
      renderProvince: function(data) {
        var self = this;
        if (this.map.province.length > 0) {
          var ems = [];
          this.map.province.forEach(function (item) {
            if (data[item.value] && item.center && item.center.indexOf(',') > -1) {
              var style = self.getStyle(data[item.value]);
              var em = new AMap.ElasticMarker({
                styles: [
                  {
                    icon:{
                      img:style[0], // orange: ee5f07, red-slow:d4237a ,yellow-slow:f9f28b , blue:1296db ,yellow:f4ea2a red:d81e06
                      size:[15,24],//图标的原始大小
                      ancher:[15,30],//锚点，图标原始大小下锚点所处的位置，相对左上角
                      imageOffset:[0,0],
                      //可缺省，当使用精灵图时可用，标示图标在整个图片中左上角的位置
                      imageSize:[15,24],
                      //可缺省，当使用精灵图时可用，整张图片的大小
                      fitZoom:5,//最合适的级别，在此级别下显示为原始大小
                      scaleFactor:2,//地图放大一级的缩放比例系数
                      maxScale:2,//最大放大比例
                      minScale:1//最小放大比例
                    },
                    label:{
                      content:'<div class="map-province-label" style="background-color:'+style[1]+';">'+item.title + ':' +style[2]+'</div>',//文本内容
                      position:'MR',//文本位置相对于图标的基准点，
                      //BL、BM、BR、ML、MR、TL、TM、TR分别代表左下角、底部中央、右下角、
                      //左侧中央、右侧中央、左上角、顶部中央、右上角。
                      //缺省时代表相对图标的锚点位置
                      offset:[0,-15],//相对position的偏移量
                      minZoom:4//label的最小显示级别
                    }
                  }
                ], // 样式组
                zoomStyleMapping:{
                  4:0,5:0,6:0,7:0,8:0,9:0,10:0,11:0,12:0,13:0,
                  14:0,
                  15:0,
                  16:0,
                  17:0,
                  18:0,
                  19:0,
                  20:0
                }, // 缩放与样式组对应
                map: self.map.map,
                position: new AMap.LngLat(item.center.split(',')[0], item.center.split(',')[1]),

              });

              em.on('click', function (e) {

              });

              ems.push(em);
            }

          });
          self.map.provinces = ems;
          self.map.map.add(ems);
        }
      },
      showProvince: function(show) {
        if (show === true) {
          this.address.isDetail = false;
          this.map.exampleAlready = true;
          this.removeMarker();
          this.map.map.setStatus({
            // showIndoorMap :  false,
            // resizeEnable :  true,
            // dragEnable :  false,
            // keyboardEnable :  false,
            // doubleClickZoom :  false,
            zoomEnable :  false,
            // rotateEnable :  false
          });
          this.map.map.add(this.map.provinces);
          this.map.map.setZoomAndCenter(this.map.minZoom, this.map.center);
        } else {
          this.address.isDetail = true;
          this.map.exampleAlready = true;
          this.map.map.setStatus({
            zoomEnable :  true,
          });
          this.map.map.remove(this.map.provinces);
        }
      },
      getStyle: function(value) {
        // orange: ee5f07, red-slow:d4237a ,yellow-slow:f9f28b , blue:1296db ,yellow:f4ea2a red:d81e06, 0df1ed
        if (!value) {
          value = 0;
        }

        if (value < 10000) {
          return ['/img/amap/location_pink.png','#df0daa', value];
        } else if (value < 100000) {
          return ['/img/amap/location_blue.png','#1296db', value];
        }else if (value < 200000) {
          return ['/img/amap/location_orange.png','#ee5f07', value];
        }else if (value < 300000) {
          return ['/img/amap/location_yellow_slow.png','#f9f28b', value];
        }else if (value < 400000) {
          return ['/img/amap/location_yellow.png','#f4ea2a', value];
        }else if (value < 500000) {
          return ['/img/amap/location_red_slow.png','#d4237a', value];
        } else {
          return ['/img/amap/location_red.png','#d81e06', value];
        }
      },
      handleClose: function(done) {
        if (this.map.clickedMarker) {
          this.map.clickedMarker.setAnimation('AMAP_ANIMATION_NONE');
        }

        done();

        // this.$confirm('确定要提交表单吗？')
        //   .then(_ => {
        //     this.loading = true;
        //     setTimeout(() => {
        //       this.loading = false;
        //       done();
        //     }, 2000);
        //   })
        //   .catch(_ => {});
      },
      genData: function() {
        var self = this;

        var row = 0;
        self.information.progress = [];
        self.information.progress.push([]);

        this.information.data.forEach(function (item, index) {
          if (index !== 0 && index%2 === 0) {
            row++;
            self.information.progress.push([])
          }

          self.information.progress[row].push({
            percentage: parseInt(Math.random() * 100),
            title: item.title,
            type: item.type,
            strokeWidth: item.type === 'line' ? 20 : 6,
            textInside: item.type === 'line',
            colors: [
              {color: '#f56c6c', percentage: 20},
              {color: '#e6a23c', percentage: 40},
              {color: '#5cb87a', percentage: 60},
              {color: '#1989fa', percentage: 80},
              {color: '#6f7ad3', percentage: 100}
            ],
          });
          self.information.progress[row].key = parseInt(Math.random() * 1000000);
        });
      },
      getColors: function(flag) {
        var colors = [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ];
        if (flag) {
          return colors;
        }
        var value = Math.floor(Math.random()*10);
        if (value > 3) {
          return colors[4];
        }
        return colors[value];
      },
      progressFactory: function (item) {
        for(var key in item){
          var percent=-1;
          if(item[key]!=null){
            percent=item[key]*1.0;
            switch(key){
              case 'batteryVoltage':			//电池电压
                percent=percent*100/15;
                break;
              case 'chargingTemperature':		//控制器温度
                percent=(percent+40)*100/130;
                break;
              case 'dischargeTemperature':	//电池温度
                percent=(percent+40)*100/130;
                break;
              case 'dayCharge':				//日累计发电量
                percent=percent*100/800;
                break;
              case 'monthOverDischarge':		//月过放次数
                percent=percent*100/1400;
                break;
              case 'lightPlateVoltage':		//光电池电压
                percent=percent*100/22;
                break;
              case 'lightPlateElectric':		//光电池电流
                percent=percent*100/10;
                break;
              // case 'batteryVoltage':			//蓄电池电压
              //   percent=percent*100/22;
              //   break;
              case 'loadVoltage':				//负载电压
                percent=percent*100/55;
                break;
              case 'loadElectric':			//负载电流
                percent=percent*100/2;
                break;
              case 'signQuality':				//信号强度
                percent=percent*100/93;
                break;
            }
          }
          if(percent>100)percent=100;
          if(percent>=0){
            // element.progress(key, percent+'%');
          }
        }
        //功率
        if(item["loadElectric"]!=null && item["loadVoltage"]!=null){
          percent=item["loadElectric"]*item["loadVoltage"]*100/30;
          if(percent>100)percent=100;
          // element.progress("loadPower", percent+'%');
        }

      },
      initLightStatus: function(light) {
        if (light.currentControllerStatus==5) {//故障
          this.information.isOn = 'alarm';
        } else if (light.currentControllerStatus==3 || (light.loadElectrics>0.02  && (light.currentControllerStatus!=5 && light.currentControllerStatus!=10))) {//开
          this.information.isOn = 'on';
        } else if ((light.currentControllerStatus!=10 && light.currentControllerStatus!=5 && light.loadElectrics<0.02)|| (light.loadElectrics<0.02 && (light.currentControllerStatus==1 || light.currentControllerStatus==2 || light.currentControllerStatus==4))) {//关
          this.information.isOn = 'off';
        } else if (light.currentControllerStatus==10 || light.currentControllerStatus=== null) {//offline
          this.information.isOn = 'offline';
        }
      },
      btnInDrawerClickHandler: function(current){
        this.beforAction(current);

        var light = this.map.clickedMarker.getExtData();

        this.information.param = {
          sns: light.sn,//（设备编码pid），
        };

        if (current.admin) {
          this.$message('持续开发中...敬请谅解！');
        } else if (this.information.isOn === 'offline') {
          this.$message('设备离线！暂不能执行该操作');
        } else if (current.strategy) {
          getStrategy().then(res => {
            if (res.status === 200 && res.statusText === 'OK') {
              if (res.data && res.data.success === true && res.data.data.records.length > 0) {
                self.information.strategy.options = res.data.data.records;
              } else {
                this.$message('未获取到策略，中止操作！！');
              }
            } else {
              this.$message('获取策略异常，中止操作！！');
            }
          });
        } else if (this.information.isOn === 'alarm') {
          this.$message('设备故障！暂不能执行该操作');
        } else if (current.restart) {
          this.iotAction('rebootControllerBatch', 'post', '开灯');
        } else if (this.information.isOn === 'off') {
          this.information.param.openStatus = 1;
          this.information.param.openPower = 15;
          this.information.power.show = true;
        } else if (this.information.isOn === 'on') {
          this.information.param.openStatus = 0;
          this.information.param.openPower = 15;
          this.iotAction('openLampBatch', 'post', '关闭');
        }
      },
      iotAction: function (url, method, act) {
        var self = this;

        iotAction(url, method, this.information.param).then(res => {
          if (res.status === 200 && res.statusText === 'OK') {
            if (res.data && res.data.success === true) {
              self.$message(res.data.msg);
              self.afterAction(act);
            } else {
              self.$message(res.data.msg);
            }
          } else {
            self.$message(res.statusText);
          }
        }).catch(error => {
          self.errorHandler(error);
        });
      },
      errorHandler(error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          this.$message(error.message);
        }
      },
      beforAction: function (current) {
        this.information.buttons.forEach(function (item) {
          if (current.icon === item.icon) {
            item.active = true;
          } else {
            item.active = false;
          }
        });


      },
      afterAction: function (action) {
        var icon;
        if (action === '开灯') {//开
          icon = this.map.light.on;
        } else if (action === '关闭') {//关
          icon = this.map.light.off;
        } else {
          return;
        }

        if (!icon) {
          return;
        }

        if (this.map.selectedMarkers.length > 0) {
          this.map.selectedMarkers.forEach(function (item) {

          });
          return;
        }

        this.map.clickedMarker.setIcon(icon);
      },
      strategyConfirm: function(flag) {
        if (flag === true) {
          if (this.information.batch.strategy.form.strategy !== 0) {
            this.information.param.id = this.information.batch.strategy.form.strategy;
            this.iotAction('writeWorkStrategyEventBatch', 'post');
            this.information.batch.strategy.show = false
          } else {
            this.$message('请选择策略！');
          }
          return;
        }
        if (this.information.strategy.form.strategy !== 0) {
          this.information.param.id = this.information.strategy.form.strategy;
          this.iotAction('writeWorkStrategyEventBatch', 'post');
          this.information.strategy.show = false
        } else {
          this.$message('请选择策略！');
        }
      },
      powerConfirm: function(flag) {
        if (flag === true) {
          if (this.information.batch.power.form.value > 0) {
            this.information.param.openPower = this.information.batch.power.form.value;
            this.iotAction('openLampBatch', 'post', '开灯');
            this.information.batch.power.show = false
          } else {
            this.$message('请选择功率！');
          }
          return;
        }
        if (this.information.power.form.value > 0) {
          this.information.param.openPower = this.information.power.form.value;
          this.iotAction('openLampBatch', 'post', '开灯');
          this.information.power.show = false
        } else {
          this.$message('请选择功率！');
        }
      },
      buttonsClickHandler: function (item) {

        this.button.buttons.forEach(function (btn) {
          if (btn.title === item.title) {
            btn.active = true;
          } else {
            btn.active = false;
          }
        });

        // 后续逻辑



      },
      snChangeHandler: function (value) {
        var self = this;
        if (self.map.markers && self.map.markers.length > 0) {
          var temp = 0;
          self.map.markers.forEach(function (item) {
            var light = item.getExtData();
            if (value === light.sn) {
              self.map.map.setCenter(item.getPosition());
            } else {
              temp++;
            }
          });

          if (self.map.markers.length === temp) {
            this.$message('当前视图无此路灯，SN: '+value);
          }
        } else {
          this.$message('当前视图路灯，SN: '+value)
        }
      },
      initCityLayer: function (adcode, map) {
        if (!adcode) {
          adcode = 450200; //全国的区划编码
        }
        if (!map) {
          map = this.map.map; //全国的区划编码
        }

        if (!map) {
          return ;
        }

        AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
          //启动页面
          initPage(DistrictExplorer);
        });

        function initPage(DistrictExplorer) {
          //创建一个实例

          var districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: map //关联的地图实例
          });

          if (!adcode) {
            adcode = 450200; //全国的区划编码
          }

          districtExplorer.loadAreaNode(adcode, function(error, areaNode) {

            if (error) {
              console.error(error);
              return;
            }

            //绘制载入的区划节点
            renderAreaNode(districtExplorer, areaNode);
          });

          //监听feature的hover事件
          districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
            toggleHoverFeature(feature, e.type === 'featureMouseover',
              e.originalEvent ? e.originalEvent.lnglat : null, districtExplorer);
          });

          //监听鼠标在feature上滑动
          districtExplorer.on('featureMousemove', function(e, feature) {
            //更新提示位置
            tipMarker.setPosition(e.originalEvent.lnglat);
          });
        }

        function renderAreaNode(districtExplorer, areaNode) {

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();

          //just some colors
          var colors = [
            "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
            "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
            "#651067", "#329262", "#5574a6", "#3b3eac"
          ];

          //绘制子级区划
          districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

            var fillColor = colors[i % colors.length];
            var strokeColor = colors[colors.length - 1 - i % colors.length];

            return {
              cursor: 'default',
              bubble: true,
              strokeColor: strokeColor, //线颜色
              strokeOpacity: 0.3, //线透明度
              strokeWeight: 1, //线宽
              fillColor: fillColor, //填充色
              fillOpacity: 0.1, //填充透明度
            };
          });

          //绘制父级区划，仅用黑色描边
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            fillColor: null,
            strokeOpacity: 0.3, //线透明度
            strokeWeight: 1, //线宽
          });

          //更新地图视野以适合区划面
          // map.setFitView(districtExplorer.getAllFeaturePolygons());  //取消自适应显示
        }

        //鼠标hover提示内容
        var tipMarkerContent = document.createElement('div');
        tipMarkerContent.classList.add('tipMarker');
        tipMarkerContent.classList.add('top');

        var tipMarker = new AMap.Marker({
          content: tipMarkerContent,
          offset: new AMap.Pixel(20,0),
          bubble: true
        });

        //根据Hover状态设置相关样式
        function toggleHoverFeature(feature, isHover, position, districtExplorer) {

          tipMarker.setMap(isHover ? map : null);

          if (!feature) {
            return;
          }

          var props = feature.properties;

          if (isHover) {

            //更新提示内容
            tipMarkerContent.innerHTML = props.name;
            //更新位置
            tipMarker.setPosition(position || props.center);
          }

          // $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

          //更新相关多边形的样式
          var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
          for (var i = 0, len = polys.length; i < len; i++) {

            polys[i].setOptions({
              fillOpacity: isHover ? 0.2 : 0.1
            });
          }
        }

      }
    },
    mounted: function(){
      var self = this;
      this.init();
      this.genData();

      // setTimeout(function () {
      //   self.information.strategy.show = true;
      //
      // }, 1500);
      //
      // setTimeout(function () {
      //   self.information.power.show = true;
      // }, 3000);

      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
      });

    }
  }
</script>

<style>

  #container{
    height: 100%;
  }
  .amap-marker-label{
    width: auto;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    height: 18px;
    color: rgba(255,255,255,1);
    background-color: transparent;
    border: none;
  }
  .map-province-label {
    width: auto;
    height: 100%;
    padding: 3px 6px;
    border-radius: 6px;
  }
  .content-row {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  /*地址选择*/
  .address {
    position: absolute;
    width: 454px;
    top: 1vh;
    left: 5vh;
    background-image: url("/img/amap/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .address-plus {
    width: 676px;
  }

  .address div {
    background: transparent;
  }

  .address .el-input__inner {
    background: transparent;
    color: rgba(255, 255, 255, 1);
    width: 400px;
    border-radius: 0;
    border: none;
  }

  .address .el-button--primary:hover {
    border: none;
    color: #FFF;
    background-color: rgba(255,255,255,0);
    background-image: url(/img/amap/button_active.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .address .el-button--primary {
    border: none;
    color: #FFF;
    background-color: rgba(255,255,255,0);
    background-image: url(/img/amap/button.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .sn-input,
  .sn-input .el-input__inner {
    width: 150px;
  }

  .address .active {
    background-image: url(/img/amap/button_active.png);
  }

  .address .el-button+.el-button {
    margin-left: 4px;
  }
  .btn-batch-ctrl {
    margin-left: 4px;
  }

  /*模拟按钮 488px*/
  .button {
    position: absolute;
    top: 20vh;
    left: 0;
    width: 40px;
    max-width: 40px;
    background-image: url("/img/amap/bg_y.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .button-item {
    height: 90px;
    min-height: 90px;
    font-size: 14px;
    line-height: 18px;
    padding: 13px 13px;
    text-align: center;
    vertical-align: middle;
    color: rgba(255, 255, 255, 1);
    background-image: url("/img/amap/inactive_cloud_y.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .button .el-row:last-child,
  .button .el-row:last-child .el-col{
    margin-bottom: 0;
  }
  .button .active {
    background-image: url("/img/amap/active_cloud_y.png");
  }

  /*详情*/
  .light-information-drawer {
    background-image: url("../../../public/img/amap/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: rgba(255, 255 , 255, 1);
  }

  .light-information-drawer .el-drawer__header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: rgba(255, 255 , 255, 1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    padding: 8px 0 8px 20px;
    background-image: url("/img/amap/information_bar_title.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .light-information-drawer .el-drawer__header span{
    font-size: 16px;
    font-weight: bold;
  }

  .light-information-drawer .el-drawer__header .el-drawer__close-btn {
    margin-right: 20px;
  }

  .light-info-drawer {
    color: rgba(255, 255 , 255, 1);
  }
  .light-info-drawer .el-row{
    margin-bottom: 0;
  }
  .light-info-drawer .light-info-base{
    background-image: url("/img/amap/information_bar_body.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 15px;
  }
  .light-info-base-detail {
    text-align: left;
    vertical-align: middle;
    height: 26px;
    line-height: 26px;
    font-size: 15px;
    padding-left: 30px;
  }

  .light-info-progress-item{
    padding: 2vh 2vh 0 2vh;
    text-align: center;
    vertical-align: middle;
    background-image: url("/img/amap/auto_top_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  light-info-progress-item .el-progress__text {
    color: wheat;
  }
  .light-info-progress-item-title{
    text-align: center;
    vertical-align: middle;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .light-info-progress-dashboard-item-title {
    text-align: center;
    vertical-align: middle;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    padding-top: 0;
    padding-bottom: 15px;
    margin-top: -15px;
  }

  .light-info-button {
    text-align: center;
    vertical-align: middle;
  }

  .light-info-button .el-button--primary:hover {
    border: none;
    color: #FFF;
    background-color: rgba(255,255,255,0);
    background-image: url(/img/amap/button_active.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .light-info-button .el-button--primary {
    border: none;
    color: #FFF;
    background-color: rgba(255,255,255,0);
    background-image: url(/img/amap/button.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .light-info-button .active {
    background-image: url(/img/amap/button_active.png);
  }

  /*dialog*/
  .strategy-dialog {

  }

  .power-dialog {
    background-color: rgba(21,27,75,1);
    background-image: url(/img/amap/auto_top_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

  }
  .power-dialog .el-dialog__header .el-dialog__title,
  .power-dialog .el-dialog__header .el-dialog__close{
    color: rgba(0, 242, 241, 1);
  }

  .power-dialog .el-form-item__label {
    color: rgba(255, 255, 255, 1);
    padding: 0 24px 0 0;
  }
  .power-dialog .el-input__inner {
    color: rgba(255, 255, 255, 1);
    background: transparent;
  }

  .power-dialog .el-input-number__decrease,
  .power-dialog .el-input-number__increase{
    color: rgba(255, 255, 255, 1) !important;
  }

  .power-dialog .el-input-number__decrease {
    border-right: none;
  }

  .power-dialog .el-slider__bar {
    background-color: rgb(63, 245, 255);
  }

  .batch-dialog {

  }

  .batch-dialog .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px 0;
  }
  .batch-dialog .tip p {
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }

  .batch-dialog .tip span {
    font-size: 16px;
    color: #E6A23C;
    line-height: 1.5em;
  }

  .light-map-conten .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .light-map-conten .el-col {
    border-radius: 4px;
  }
  .light-map-conten .bg-purple-dark {
    background: #99a9bf;
  }
  .light-map-conten .bg-purple {
    background: #d3dce6;
  }
  .light-map-conten .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .light-map-conten .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /*图例*/
  .example-container {
    position: absolute;
    width: 14vh;
    top: 60vh;
    left: 157vh;
    background-color: rgba(255, 255, 255,.6);
    border-radius: 1.5vh;
  }

  .example-container .el-row {
    border-bottom: 1px solid rgba(255, 255, 255,1);
  }

  .example-container .el-row:last-child {
    border-bottom: none;
  }

  .example-container .el-col {
     margin-bottom: 0;
  }

  .example-item {
    width: 10vh;
    height: 3vh;
    line-height: 4vh;
    padding-left: 3vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    margin-left: 1vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    text-align: left;
    vertical-align: middle;
    background-size: 2vh 100% ;
    background-repeat: no-repeat;
    font-size: 14px;
    color: #333333;
  }
</style>
